<template>
  <div>
    <el-row>
      <el-col :span="16" style="display:flex;align-items:center">
        <el-button
          v-for="(rowItem, rowIndex) in quesBtnConfigs"
          :key="rowIndex"
          size="mini"
          @click="handleBtnClick(rowItem.value)"
          >{{ rowItem.label }}</el-button
        >
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
    <!-- 单选题对话框 -->
    <!-- {{ showSingleSelectDialog }} -->
    <select-dialog
      :quesType="QUESTION_TYPE_MAP.SINGLE_SELECT"
      :uuid="uuid"
      v-model="showSingleSelectDialog"
    />
    <!-- 多选题对话框 -->
    <!-- <select-dialog
      :quesType="QUESTION_TYPE_MAP.MULTI_SELECT"
      v-model="showMultiSelectDialog"
    /> -->
    <!-- 判断题对话框 -->
    <!--  <select-dialog
      :quesType="QUESTION_TYPE_MAP.JUDGE"
      v-model="showJudgeDialog"
    /> -->
    <!-- 填空题对话框 -->
    <!-- <blank-dialog
      :quesType="QUESTION_TYPE_MAP.BLANK"
      :uuid="uuid"
      v-model="showBlankDialog"
    /> -->
    <!-- 解答题对话框 -->
    <!-- <answer-dialog
      :quesType="QUESTION_TYPE_MAP.ANSWER"
      v-model="showAnswerDialog"
    /> -->
    <!-- 英语作文题对话框 -->
    <!-- <en-article-dialog
      :quesType="QUESTION_TYPE_MAP.EN_ARTICLE"
      v-model="showEnArticleDialog"
    /> -->
    <!-- 语文作文题对话框 -->
    <!-- <cn-article-dialog
      :quesType="QUESTION_TYPE_MAP.CN_ARTICLE"
      v-model="showCnArticleDialog"
    /> -->

    <!--  <select-set-dialog :quesGroup="quesGroup" v-model="showSelectSetDialog" /> -->
  </div>
</template>

<script>
import _ from "lodash";
import {
  QUESTION_TYPE_MAP,
  QUESTION_TYPE_OPTIONS,
  eventBusNames
} from "@/assets/js/constant";
import SelectDialog from "./ques-add-dialogs/select-dialog-2.vue";
/* 
import BlankDialog from "./ques-add-dialogs/blank-dialog.vue";
import AnswerDialog from "./ques-add-dialogs/answer-dialog.vue";
import EnArticleDialog from "./ques-add-dialogs/en-article-dialog.vue";
import CnArticleDialog from "./ques-add-dialogs/cn-article-dialog.vue";

import SelectSetDialog from "./ques-add-dialogs/select-set-dialog.vue"; */

import eventBus from "@/assets/js/event-bus";

export default {
  components: {
    SelectDialog
    /*  ,
    BlankDialog,
    AnswerDialog,
    EnArticleDialog,
    CnArticleDialog,

    SelectSetDialog */
  },
  data() {
    return {
      QUESTION_TYPE_MAP,
      buttonRowCount: 2,
      quesType: "",
      uuid: "",
      quesGroup: null,

      showSingleSelectDialog: false,
      showMultiSelectDialog: false,
      showJudgeDialog: false,
      showBlankDialog: false,
      showAnswerDialog: false,
      showEnArticleDialog: false,
      showCnArticleDialog: false,

      showSelectSetDialog: false
    };
  },
  computed: {
    quesBtnConfigs() {
      /*  console.log(9999); */
      return QUESTION_TYPE_OPTIONS;
      //   return _.chunk(QUESTION_TYPE_OPTIONS, this.buttonRowCount);
    }
  },
  created() {
    eventBus.$on(eventBusNames.SHOW_SELECT_DIALOG, this.onShowSelectDialog);
    eventBus.$on(
      eventBusNames.SHOW_SELECT_SET_DIALOG,
      this.onshowSelectSetDialog
    );
    eventBus.$on(eventBusNames.SHOW_BLANK_DIALOG, this.onShowBlankDialog);
  },
  methods: {
    handleBtnClick(quesType) {
      this.quesType = quesType;
      switch (this.quesType) {
        case QUESTION_TYPE_MAP.JUDGE:
          this.showJudgeDialog = true;
          break;
        case QUESTION_TYPE_MAP.SINGLE_SELECT:
          this.uuid = "";
          this.showSingleSelectDialog = true;
          break;
        case QUESTION_TYPE_MAP.MULTI_SELECT:
          this.showMultiSelectDialog = true;
          break;
        case QUESTION_TYPE_MAP.BLANK:
          this.showBlankDialog = true;
          break;
        case QUESTION_TYPE_MAP.ANSWER:
          this.showAnswerDialog = true;
          break;
        case QUESTION_TYPE_MAP.EN_ARTICLE:
          this.showEnArticleDialog = true;
          break;
        case QUESTION_TYPE_MAP.CN_ARTICLE:
          this.showCnArticleDialog = true;
          break;
        default:
          break;
      }
    },
    onShowSelectDialog(uuid) {
      this.uuid = uuid;
      this.showSingleSelectDialog = true;
    },
    onshowSelectSetDialog(quesGroup) {
      this.quesGroup = quesGroup;
      this.showSelectSetDialog = true;
    },
    onShowBlankDialog(uuid) {
      this.uuid = uuid;
      this.showBlankDialog = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-box {
  margin-bottom: 1em;
}
</style>
